<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片面板 -->
      <el-card shadow="never">
        <div class="filter-container">
          <el-row :gutter="20">
            <el-col>
              <!-- 新增试题按钮 -->
              <el-button
                class="filter-item fr"
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="$router.push('/questions/new')"
                >新增试题</el-button
              >
            </el-col>
          </el-row>

          <!-- 问题表单组件 -->
          <question-form
            @get-question="getQuestionsList($event)"
          ></question-form>
        </div>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据记录结束 -->
        <!-- 数据列表组件 -->
        <question-table
          :dataList="dataList"
          v-model="listLoading"
          @remove-question="removeQuestionById($event)"
          @add-choice="addChoiceById($event)"
        ></question-table>
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[5, 10, 15, 20]"
              layout=" prev, pager, next , sizes, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- 分页结束 -->
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入子组件
import QuestionForm from './question-view/QuestionForm'
import QuestionTable from './question-view/QuestionTable'
import { list as questionList, remove, choiceAdd } from '@/api/hmmm/questions'

export default {
  name: 'QuestionList',
  components: {
    QuestionForm,
    QuestionTable
  },
  data () {
    return {
      // 请求参数
      requestParameters: {
        page: 1,
        pagesize: 5
      },
      // 基础题库列表
      dataList: [],
      // 总条数
      total: null,
      // loading动画
      listLoading: false,
      // 提示文本
      alertText: ''
    }
  },
  created () {
    this.getQuestionsList()
  },
  methods: {
    // 1. 获取问题列表数据
    async getQuestionsList (params) {
      // 显示loading动画
      this.listLoading = true
      if (!params) {
        // 发送ajax请求数据  搜索发的请求
        const { data: res } = await questionList(this.requestParameters)
        // 获取数据给dataList
        this.dataList = res.items
        // 获取总条数
        this.total = res.counts
      } else {
        // 发送ajax请求数据  搜索发的请求
        const { data: res } = await questionList(params)
        // 获取数据给dataList
        this.dataList = res.items
        // 获取总条数
        this.total = res.counts
      }
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 根据id删除子组件要删除的题目
    async removeQuestionById (id) {
      // 发送ajax请求进行删除
      await remove({ id })
      // 重新渲染表格
      this.getQuestionsList()
    },
    // 根据id将子组件要添加到精选的题目
    async addChoiceById (id) {
      // 发送ajax请求进行添加到精选
      await choiceAdd({ id, choiceState: 1 })
      // 提示加入精选题库成功+跳转到精选题库
      this.$message.success('加入精选题库成功')
      this.$router.push('/questions/choice')
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getQuestionsList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getQuestionsList()
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  min-width: 1169px;
}
.el-alert {
  margin-bottom: 10px;
}
.pagination {
  float: right;
  padding: 20px 0;
}
</style>
